<!--

This file is part of the vscode-powertools distribution.
Copyright (c) e.GO Digital GmbH, Aachen, Germany (https://www.e-go-digital.com/)

vscode-powertools is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as
published by the Free Software Foundation, version 3.

vscode-powertools is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.

-->


<!-- content -->
<div class="container" id="ego-content-container">    
    <div class="row">
        <div class="col col-12">
            <table class="ego-content">
                <tbody>
                    <tr>
                        <td class="ego-left">
                            <!-- Sidebar -->
                            <div class="sidebar-fixed position-fixed">
                                <div class="list-group list-group-flush">
                                    <a href="#" onclick="ego_select_area('apps')" class="list-group-item list-group-item-action waves-effect ego-item ego-item-apps">
                                        <i class="fa fa-bolt mr-3"></i>Apps
                                    </a>

                                    <a href="#" onclick="ego_select_area('azuredevops')" class="list-group-item list-group-item-action waves-effect ego-item ego-item-azuredevops">
                                        <i class="fa fa-codepen mr-3"></i>Azure DevOps
                                    </a>

                                    <a href="#" onclick="ego_select_area('mapbox')" class="list-group-item list-group-item-action waves-effect ego-item ego-item-m mapbox">
                                        <i class="fa fa-map mr-3"></i>MapBox
                                    </a>

                                    <a href="#" onclick="ego_select_area('notifications')" class="list-group-item list-group-item-action waves-effect ego-item ego-item-notifications">
                                        <i class="fa fa-envelope-open-o mr-3"></i>Notifications
                                    </a>

                                    <a href="#" onclick="ego_select_area('slack')" class="list-group-item list-group-item-action waves-effect ego-item ego-item-slack">
                                        <i class="fa fa-slack mr-3"></i>Slack
                                    </a>
                                </div>    
                            </div>
                            <!-- Sidebar -->
                        </td>
        
                        <td class="ego-right">
                            <div class="ego-area ego-area-apps" style="display: none;">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item active">Apps</li>
                                    </ol>
                                </nav>

                                <form>
                                    <!-- App Store URL -->
                                    <div class="form-group">
                                        <label for="ego-app-store-url">App Store URL</label>
                                        <input id="ego-app-store-url"
                                               class="form-control"
                                               type="text"          
                                               title="Custom App Store URL"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter an URL with a JSON file, which describes a custom app store.">
                                    </div>
                                </form>
                            </div>

                            <div class="ego-area ego-area-azuredevops" style="display: none;">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item active">Azure DevOps</li>
                                    </ol>
                                </nav>

                                <form>
                                    <!-- Global AzureDev Ops credentials -->
                                    <div class="form-group" id="ego-global-azure-devops-credentials">
                                        <label for="ego-global-azuredevops-org">Organization (global)</label>
                                        <input id="ego-global-azuredevops-org"
                                               class="form-control"
                                               type="text"          
                                               title="Organization (global)"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the organization, to access the Azure DevOps API, which can be used in all workspaces.">

                                        <label for="ego-global-azuredevops-username">Username (global)</label>
                                        <input id="ego-global-azuredevops-username"
                                               class="form-control"
                                               type="text"          
                                               title="Username (global)"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the username, to access the Azure DevOps API, which can be used in all workspaces.">
    
                                        <label for="ego-global-azuredevops-pat">Global Personal Access Token</label>
                                        <input id="ego-global-azuredevops-pat"
                                               class="form-control"
                                               type="password"          
                                               title="Global Personal Access Token"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the Personal Access Token, to access the Azure DevOps API, which can be used in all workspaces.">
                                    </div>

                                    <!-- Workspace AzureDev Ops credentials -->
                                    <div class="form-group" id="ego-workspace-azure-devops-credentials">
                                        <label for="ego-workspace-azuredevops-org">Organization (workspace)</label>
                                        <input id="ego-workspace-azuredevops-org"
                                               class="form-control"
                                               type="text"          
                                               title="Organization (workspace)"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the organization, to access the Azure DevOps API, which can be used in the current workspace.">
    
                                        <label for="ego-workspace-azuredevops-username">Username (workspace)</label>
                                        <input id="ego-workspace-azuredevops-username"
                                               class="form-control"
                                               type="text"          
                                               title="Username (workspace)"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the username, to access the Azure DevOps API, which can be used in the current workspace.">
                
                                        <label for="ego-workspace-azuredevops-pat">Workspace Personal Access Token</label>
                                        <input id="ego-workspace-azuredevops-pat"
                                               class="form-control"
                                               type="password"          
                                               title="Workspace Personal Access Token"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the Personal Access Token, to access the Azure DevOps API, which can be used in the current workspace.">
                                    </div>
                                </form>
                            </div>

                            <div class="ego-area ego-area-mapbox" style="display: none;">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item active">MapBox</li>
                                    </ol>
                                </nav>

                                <form>
                                    <!-- Global MapBox credentials -->
                                    <div class="form-group" id="ego-global-mapbox-api-tokens">
                                        <label for="ego-global-mapbox-token">Global MapBox Token</label>
                                        <input id="ego-global-mapbox-token"
                                               class="form-control"
                                               type="password"          
                                               title="Global MapBox Token"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the API Token, to access the MapBox API, which can be used in all workspaces.">
                                    </div>

                                    <!-- Workspace MapBox credentials -->
                                    <div class="form-group" id="ego-workspace-mapbox-api-tokens">
                                        <label for="ego-workspace-mapbox-token">Workspace MapBox Token</label>
                                        <input id="ego-workspace-mapbox-token"
                                               class="form-control"
                                               type="password"          
                                               title="Workspace MapBox Token"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the API Token, to access the MapBox API, which can be used in the current workspace.">
                                    </div>
                                </form>
                            </div>

                            <div class="ego-area ego-area-notifications" style="display: none;">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item active">Notifications</li>
                                    </ol>
                                </nav>

                                <form>
                                    <!-- open CHANGELOG on startup -->
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="ego-open-changelog-on-startup">
                                        <label class="custom-control-label" for="ego-open-changelog-on-startup">Open CHANGELOG on startup</label>
                                    </div>
                                </form>
                            </div>

                            <div class="ego-area ego-area-slack" style="display: none;">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item active">Slack</li>
                                    </ol>
                                </nav>

                                <form>
                                    <!-- Global Slack credentials -->
                                    <div class="form-group" id="ego-global-slack-credentials">
                                        <label for="ego-global-slack-token">Global Slack Token</label>
                                        <input id="ego-global-slack-token"
                                               class="form-control"
                                               type="password"          
                                               title="Global Slack Token"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the Access Token, to access the Slack API, which can be used in all workspaces.">
                                    </div>

                                    <!-- Workspace Slack credentials -->
                                    <div class="form-group" id="ego-workspace-slack-credentials">
                                        <label for="ego-workspace-slack-token">Workspace Slack Token</label>
                                        <input id="ego-workspace-slack-token"
                                               class="form-control"
                                               type="password"          
                                               title="Workspace Slack Token"                             
                                               data-toggle="popover"
                                               data-trigger="focus"
                                               data-placement="bottom"
                                               data-content="Enter the Access Token, to access the Slack API, which can be used in the current workspace.">
                                    </div>
                                </form>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <a class="ego-btn btn btn-primary" id="ego-save-settings-btn">
                <i class="fa fa-floppy-o" aria-hidden="true"></i>
                
                <span>Save</span>
            </a>
        </div>
    </div>
</div>
<!-- content -->
